<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${ctx}">
<title>流程管理页面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link type="text/css" media="screen" charset="utf-8" rel="stylesheet" href="${ctx}commons/css/common.css" />
<link type="text/css" media="screen" charset="utf-8" rel="stylesheet" href="${ctx}plugins/fancybox-1.3.4/jquery.fancybox-1.3.4.css" />
<script language="javascript" type="text/javascript" src="${ctx}plugins/datepicker/WdatePicker.js"></script>
<script type="text/javascript" src="${ctx}plugins/jquery/jquery-1.7.min.js"></script>
<script type="text/javascript" src="${ctx}plugins/fancybox-1.3.4/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="${ctx}plugins/fancybox-1.3.4/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#addFlow").fancybox({
			'width' 		: 880,
			'height' 		: 500,
			'autoScale' 	: false,
			'transitionIn' 	: 'none',
			'transitionOut' : 'none',
			'type' 			: 'iframe',
			'showCloseButton' : false,
			'onCleanup'     : function(){$("#formId").submit();}
		});
		$("#updateFlow").fancybox({
			'width' 		: 880,
			'height' 		: 500,
			'autoScale' 	: false,
			'transitionIn' 	: 'none',
			'transitionOut' : 'none',
			'type' 			: 'iframe',
			'showCloseButton' : false,
			'onCleanup'     : function(){$("#formId").submit();}
		});
		$("#showFlow").fancybox({
			'width' 		: 766,
			'height' 		: 400,
			'autoScale' 	: false,
			'transitionIn' 	: 'none',
			'transitionOut' : 'none',
			'type' 			: 'iframe'
		});
		//鼠标经过时结果行背景变色
		$(".tb-table>table tr:gt(0)").hover(function() {
			$(this).css("background", "#EEEEEE");
		}, function() {
			$(this).css("background", "");
		});
	});
	function addFlow(){
		var obj = $("#addFlow");
		obj.attr("href","${ctx}flow/addFlow.htm");
		obj.trigger("click");
	}
	function updateFlow(flowCode){
		var obj = $("#updateFlow");
		obj.attr("href","${ctx}flow/updateFlow.htm?flowCode=" + flowCode);
		obj.trigger("click");
	}
	function showFlow(flowCode){
		var obj = $("#showFlow");
		obj.attr("href","${ctx}flow/showFlow.htm?flowCode=" + flowCode);
		obj.trigger("click");
	}
	function deleteFlow(flowCode,flowName){
		if (Boolean(flowCode) && confirm("您确定要删除【" + flowName + "】这个流程吗？")) {
			$.post(
				"flow/flowManage.htm",
				{
					action : "DELETE",
					flowCode : flowCode
				},
				function(data) {
					if (data == 'Y') {
						alert("删除成功！");
					} else {
						alert("该流程已有实例绑定，故不允许删除！");
					}
					$("#formId").submit();
				});
		}
	}
	function resetOPT(){
		$("#typeCode").val("");
		$("#flowName").val("");
		$("#status").val("");
		$("#memo").val("");
	}
</script>
</head>
<body>
	<div id="frame-body">
		<div id="frame-main">
			<div id="frame-content">
				<h3 class="fn-mt7">查询条件
					<span class="toolbarbtn"><input type="button" onclick="addFlow()" value="新增流程" /></span>
				</h3>
				<div class="tb-table">
					<form id="formId" action="flow/flowManage.htm" method="POST">
						<table>
							<tr>
								<th width="10%">所属分类：</th>
								<td width="15%"><select id="typeCode" name="typeCode" class="i-select">
										<option value="">全部</option>
										<c:if test="${ftJSON != null }">
											<c:forEach var="ft" items="${ftJSON }">
												<option value="${ft.key}" <c:if test="${form.typeCode eq ft.key}">selected="selected"</c:if>>${ft.value}</option>
											</c:forEach>
										</c:if>
									</select></td>
								<th width="10%">流程名称：</th>
								<td width="20%"><input type="text" class="i-text" id="flowName" name="flowName" value="${form.flowName}"/></td>
							</tr>
							<tr>
								<th>使用状态：</th>
								<td><select id="status" name="status" class="i-select">
										<option value="">全部</option>
										<option value="0" <c:if test="${48 eq form.status }">selected="selected"</c:if>>未使用</option>
										<option value="1" <c:if test="${49 eq form.status }">selected="selected"</c:if>>使用中</option>
										<option value="2" <c:if test="${50 eq form.status }">selected="selected"</c:if>>已保留</option>
									</select></td>
								<th>流程描述：</th>
								<td><input type="text" class="i-text" id="memo" name="memo" value="${form.memo}" style="width:99%"/></td>
							</tr>
							<tr>
								<td colspan="4" align="center">
									<div class="tb-tfoot-noborder">
										<span class="btn" id="sID"><input type="submit" value="查&emsp;询" /></span>
										<span class="btn"><input type="button" onclick="resetOPT()" value="重&emsp;置" /></span>
									</div>
								</td>
							</tr>
						</table>
					</form>
				</div>
				<c:if test="${flowList != null}">
					<h3 class="fn-mt7">
						<span style="float: left; font-size: 14px; font-weight: bold;">流程查询结果</span>
						<br style="height: 0; clear: both;" />
					</h3>
					<div class="tb-table">
						<table id="tab">
							<thead>
								<tr>
									<th width="30">序 号</th>
									<th>流程名称</th>
									<th>所属分类</th>
									<th>流程描述</th>
									<th width="60">节点数</th>
									<th width="80">使用状态</th>
									<th width="120">操&emsp;作</th>
								</tr>
							</thead>
							<tbody>
								<c:choose>
									<c:when test="${fn:length(flowList) > 0}">
										<c:forEach var="flow" items="${flowList}" varStatus="str">
											<tr>
												<td align="center"><c:out value="${str.count}" /></td>
												<td align="center"><a href="javascript:void(0)" onclick="showFlow('${flow.flowCode}')"><c:out value="${flow.flowName}" /></a></td>
												<td align="center"><c:out value="${flow.typeCode}" /></td>
												<td align="center"><c:out value="${flow.memo}" /></td>
												<td align="center"><c:out value="${flow.nodeNumber}" /></td>
												<td align="center">
													<c:if test="${48 eq flow.status}">未使用</c:if>
													<c:if test="${49 eq flow.status}">使用中</c:if>
													<c:if test="${50 eq flow.status}">已保留</c:if>
												</td>
												<td align="center">
													<a href="javascript:void(0)" onclick="updateFlow('${flow.flowCode}')">修改</a>&emsp;
													<a href="javascript:void(0)" onclick="deleteFlow('${flow.flowCode}','${flow.flowName}')">删除</a>
												</td>
											</tr>
										</c:forEach>
									</c:when>
									<c:otherwise>
										<tr>
											<td class="center" colspan="7">没有找到对应的记录</td>
										</tr>
									</c:otherwise>
								</c:choose>
							</tbody>
						</table>
					</div>
				</c:if>
			</div>
		</div>
	</div>
	<a id="addFlow" href="" style="display: none;"></a>
	<a id="updateFlow" href="" style="display: none;"></a>
	<a id="showFlow" href="" style="display: none;"></a>
</body>
</html>